import SwiftUI

// Hue - 色调、色相

import SwiftUI

struct AnimatableAttributes_Hue: View {
    @State var angle: Double = 1.0
    @State var progress: Double = 1
    
    var body: some View {
        VStack(spacing: 30) {
            Divider() // Tips: Set navigation bar background...
            
            Text("Animatable Attributes")
                .font(.largeTitle)
            
            Text("Hue")
                .font(.title)
                .foregroundColor(.gray)
            
            Text("Another way to change color is to change the hue on the color wheel by rotating the current point.")
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.cyan)
                .foregroundColor(.black)
            
            makeDemoView()
            
            Spacer()
            
            Button(action: {
                // ...
                // 余数的意义：限制数值的范围
                // 余数一定小于除数
                // divider: n
                // reminder: < n
                // n / 4: 0 1 2 3
                // n / 5: 0 1 2 3 4
                // ...
                // n / 360: 0 1 2 3 ... 359
                angle += 10 // 色相调节粒度：10
                angle = angle.truncatingRemainder(dividingBy: 360.0)
            }, label: {
                Text("Change")
                    .font(.title)
                    .padding(.bottom, 50)
            })
            
            // 无极调节
            Slider(value: $progress)
                .padding()
                .padding(.bottom, 50)
        }
        .navigationTitle("Hue animation")
        .navigationBarTitleDisplayMode(.inline)
    }
    
    func makeDemoView() -> some View {
        ZStack {
            RoundedRectangle(cornerRadius: 16)
                // 色相必须搭配一个具体的起始色彩
                .foregroundColor(.yellow)
                .hueRotation(Angle(degrees: angle))
                .animation(.linear, value: angle)
                .onChange(of: progress) {
                    // 只要 progress 的值发生变化
                    // 就自动执行这里的代码
                    // $0 - 特殊变量，反应出来的就是当前 progress 的值。
                    angle = 360.0 * $0
                }
                .onChange(of: angle) {
                    print("Current angle: \($0).")
                }
            
                
            VStack(spacing: 30) {
                Text("Hue: \(angle)")
                    .foregroundColor(.black)
                    .font(.title)
                
                Text("Progress: \(progress)")
                    .foregroundColor(.black)
                    .font(.title)
            }
            
        }
        
        .padding(.horizontal)
    }
}










